import { useEffect, useState } from 'react'
import { View, ScrollView } from '@tarojs/components'
import { IHeaderBox, IBarCharts } from '@/components/index'
import { colChartStat, natureAnalyze } from '@/axios/nature'
import './index.scss'

interface PTProps {}

const PTIndex: React.FC<PTProps> = () => {
  const [triggered, setTriggered] = useState<boolean>(false)
  const [chartData, setChartData] = useState<API.ChartStatItem[]>([])
  const [anglyzeData, setAnglyzeData] = useState<API.AnglyzeItem[]>([])

  const onRefresh = () => {
    setTriggered(true)
    getNatureAnalyze()
    getChartData()
  }

  const getNatureAnalyze = async () => {
    try {
      const result = await natureAnalyze()
      setAnglyzeData(result)
    } catch {}
  }

  const getChartData = async () => {
    try {
      const results = await colChartStat()
      setTriggered(false)
      setChartData(results)
    } catch {}
  }

  useEffect(() => {
    getNatureAnalyze()
    getChartData()
  }, [])

  return (
    <ScrollView
      scrollY
      className='scrollview'
      onRefresherRefresh={onRefresh}
      enableBackToTop
      refresherEnabled
      refresherTriggered={triggered}
      scrollWithAnimation
    >
      <View className='common_page'>
        <View className='card_box chart_box'>
          <IHeaderBox title='性格类型' />
          <IBarCharts id='pt_chart' data={chartData} />
        </View>
        <View className='card_box data_box'>
          <IHeaderBox title='性格类型分析' />
          <View className='data_info'>
            {/* {anglyzeData.map(item => (
              <View key={item.type} className='anglyze_item'>
                <View className='item_title'>
                  {item.type} ({item.typeAlias})
                </View>
                <View className='item_value'>{item.desc}</View>
              </View>
            ))} */}
            <View className='anglyze_item'>
              <View className='item_title'>ISTJ（普京、包拯）</View>
              <View className='item_value'>
                <div>有责任心的班级管理拥护者。</div>
                <div>喜欢保持安静和勤奋，不喜欢显露。</div>
                <div>学习模式</div>
                <div>Ø 具体、有序的学习方式。</div>
                <div>Ø 对目前有实际应用的学习模式 发展建议。</div>
                <div>Ø 需要围绕明确目标给予建议。</div>
                <div>Ø 学习向他人表达赞赏。</div>
                <div>Ø 需培养耐心，用不同方式沟通忽视规则和程序的人。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ISFJ（乔治·布什、唐僧）</View>
              <View className='item_value'>
                <div>忠诚、有奉献精神和同情心的协作者。</div>
                <div>不喜欢表达个人感情，情绪敏感而细腻。</div>
                <div>十分重视朋友，愿意为他人服务，喜欢充当后盾。</div>
                <div>学习模式</div>
                <div>Ø 花费充足的时间以结构化的方式，安静地记忆材料 </div>
                <div>Ø 注重实用性，关注做什么可以为人们提供帮助 </div>
                <div>发展建议 </div>
                <div>Ø 需发展更多的自信和直率。</div>
                <div>Ø 学会宣扬自己的成就。</div>
                <div>Ø 对不同的做事方式保持开放态度。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>INFJ（荀子、托尔斯泰）</View>
              <View className='item_value'>
                <div>
                  深思熟虑的决策者。 关注正直和公义，在集体中善于运用影响力。
                </div>
                <div>喜欢独立学习，热衷关注自身成长的小圈子。</div>
                <div>学习模式 </div>
                <div>Ø 极具个体化和思考式的学习方式。</div>
                <div>Ø 强调复杂、结构性的概念和关系的学习。</div>
                <div>发展建议</div>
                <div>Ø 需要不断征求他人的建议和获得他人反馈。</div>
                <div>Ø 需要以更放松和开放的态度面对现状。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>INTJ（牛顿、康德）</View>
              <View className='item_value'>
                <div>完美主义者</div>
                <div>追求独特的思想和宏大的梦想。</div>
                <div>对自己和他人都要求严苛。喜欢独自完成复杂的任务。</div>
                <div>学习模式 </div>
                <div>Ø 个性化、思考式学习方式，深入其感兴趣的领域。</div>
                <div>
                  Ø 智慧型、理论型学习方式，首先要提供一个宏伟蓝图 发展建议。
                </div>
                <div>发展建议</div>
                <div>Ø 个性化方式和想法可以征求他人的反馈和建议。</div>
                <div>Ø 当事实资料不支持自己的想法时，应面对现实。</div>
                <div>Ø 明确他人的贡献应受到鼓励和承认。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ISTP（乔丹、关羽）</View>
              <View className='item_value'>
                <div>现实主义者</div>
                <div>平和寡言，显得冷酷而清高，容易害羞。</div>
                <div>喜欢行动和冒险，乐于户外活动。喜欢独立学习。</div>
                <div>学习模式 </div>
                <div>Ø 生动性、娱乐性的学习模式。</div>
                <div>Ø 对有用的内容和有实际应用的学习内容感兴趣。</div>
                <div>发展建议</div>
                <div>Ø 需要增强开放性，与他人共享信息。</div>
                <div>Ø 加强计划性，付出更多努力获取成功。</div>
                <div>Ø 需发展设置和保持目标的方法。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ISFP（张国荣、奥黛丽·赫本）</View>
              <View className='item_value'>
                <div>细腻充沛的体验者</div>
                <div>外表谦虚缄默，内在热情友善。</div>
                <div>富有艺术天赋和审美感，喜欢在和谐的氛围中学习。</div>
                <div>学习模式 </div>
                <div>Ø 安静地学习直接经验。</div>
                <div>Ø 学习实际的、能帮助他人的内容。</div>
                <div>发展建议</div>
                <div>Ø 以怀疑的态度分析他人提供的信息。</div>
                <div>Ø 需发展更朝向未来定向的观念。</div>
                <div>Ø 需对他人更果断，对自己有更多赞赏。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>INFP（王阳明、梵高）</View>
              <View className='item_value'>
                <div>理想主义者</div>
                <div>个人信仰坚定，好奇心强烈。</div>
                <div>喜欢独立学习或在发挥创造性的小团体。</div>
                <div>学习模式 </div>
                <div>Ø 安静地专注于自己的兴趣。</div>
                <div>Ø 灵活，专注自己和他人的发展。</div>
                <div>发展建议</div>
                <div>Ø 需要发展更坚强的意志，并愿意说“不”。</div>
                <div>Ø 需要用自己的准则分清事实和逻辑。</div>
                <div>Ø 需要建立和执行行动计划。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>INTP（爱因斯坦、老子）</View>
              <View className='item_value'>
                <div>解决理性问题者</div>
                <div>苛求精细、惯于怀疑。</div>
                <div>喜欢理论和抽象的事物，喜欢单独工作。</div>
                <div>学习模式 </div>
                <div>Ø 个体化学习方式，根据自己感兴趣的深度进行学习。</div>
                <div>Ø 广泛的、概念性的、能挑战智慧的学习方式。</div>
                <div>发展建议</div>
                <div>Ø 需要关注细节，确立完成任务的具体步骤。</div>
                <div>Ø 为获得他人的合作，需要放弃细小的问题。</div>
                <div>Ø 需要更多地表达对他人的赞赏。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ESTP（刘邦、特朗普）</View>
              <View className='item_value'>
                <div>好奇而热心的观察者</div>
                <div>不会焦虑，活跃、随遇而安、天真率直。</div>
                <div>讲究实效，乐于享受现在。</div>
                <div>学习模式 </div>
                <div>Ø 间接经验型、尝试错误型的学习方式。</div>
                <div>Ø 注意力集中在即刻能应用的学习内容。</div>
                <div>发展建议</div>
                <div>Ø 需更多关注他人的情绪感受。</div>
                <div>Ø 在快速决定前，事先计划，考虑更多的因素。</div>
                <div>Ø 需完成眼前的任务。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ESFP（余华、保罗·柯艾略）</View>
              <View className='item_value'>
                <div>现实的观察者</div>
                <div>擅长交际，常常是别人的"注意中心"。</div>
                <div>信任自己能够听到、闻到、触摸和看到的事物。</div>
                <div>学习模式 </div>
                <div>Ø 利用充裕的时间通过讨论获取新知识。</div>
                <div>Ø 学习事实性的知识，搞清楚知识如何发挥作用。</div>
                <div>发展建议</div>
                <div>Ø 需平衡花费在学习和社会性交往上的时间。</div>
                <div>Ø 需致力于完成计划，对时间进行管理。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ENFP（切·格瓦拉、李白）</View>
              <View className='item_value'>
                <div>热情的观察者</div>
                <div>具有独创性的思想和对可能性的强烈感受。</div>
                <div>关心他人发展，喜欢在团队中工作。</div>
                <div>学习模式 </div>
                <div>Ø 积极主动型、经验型、想象型。</div>
                <div>Ø 对学习内容感兴趣，不管它们是否有实际应用性。</div>
                <div>发展建议</div>
                <div>Ø 需要关注重要的细节。</div>
                <div>Ø 为达成目标，增加制定计划和时间管理的技巧。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ENTP（本杰明·富兰克林、曹操）</View>
              <View className='item_value'>
                <div>活跃的创造者</div>
                <div>多才多艺，分析型思维。</div>
                <div>富于创新，喜欢与他人一起从事创造性活动。</div>
                <div>学习模式 </div>
                <div>Ø 主动、概念型的学习，喜欢由专家传授知识。</div>
                <div>Ø 接受挑战型，定向于未来的发展蓝图。</div>
                <div>发展建议</div>
                <div>Ø 需要承认他人贡献的有效性。</div>
                <div>Ø 需要学会在集体里如何配合。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ESTJ（李鸿章、福特）</View>
              <View className='item_value'>
                <div>严格的执行者</div>
                <div>信奉专业化和职业化，自我负责。</div>
                <div>喜欢事先组织细节和操作程序与他人一起完成任务。</div>
                <div>学习模式 </div>
                <div>Ø 学习间接经验，采用结构化的学习方式。</div>
                <div>Ø 接实际型，关注他们能运用的学习内容。</div>
                <div>发展建议</div>
                <div>Ø 需做特别的努力学会赞赏别人。</div>
                <div>Ø 需考虑和识别自己的情感和价值观。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>
                ESFJ（理查德-尼克松、村上春树）
              </View>
              <View className='item_value'>
                <div>和善的服务者</div>
                <div>注重秩序，讲求实际、实事求是和安排有序。</div>
                <div>对于批评或者别人的漠视很敏感。</div>
                <div>学习模式 </div>
                <div>Ø 系统性、参与性、个体性的学习方式。</div>
                <div>Ø 学习早已有实践应用的应用性材料。</div>
                <div>发展建议</div>
                <div>Ø 需学会分离出自己的需要。</div>
                <div>Ø 做决策时，需考虑决策的理性和全局性。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ENFJ（刘备、曼德拉）</View>
              <View className='item_value'>
                <div>理想主义者</div>
                <div>性格平和，忍耐力强。</div>
                <div>经常自我批评，喜欢与人群在一起。</div>
                <div>学习模式 </div>
                <div>Ø 在交流中学习重要的内容。</div>
                <div>Ø 有良好结构的学习材料对学习帮助很大。</div>
                <div>发展建议</div>
                <div>Ø 同时关注任务中的细节问题和完成任务的人。</div>
                <div>Ø 需要认真听取客观的评价，少一些自我批评。</div>
              </View>
            </View>
            <View className='anglyze_item'>
              <View className='item_title'>ENTJ（武则天、拿破仑）</View>
              <View className='item_value'>
                <div>伟大的长远规划者</div>
                <div>对要求推理和才智的事情很擅长。</div>
                <div>乐于完成一些需要解决的复杂问题。</div>
                <div>学习模式 </div>
                <div>Ø 喜欢由专家传授知识。</div>
                <div>Ø 对挑战和问题抱开放态度。</div>
                <div>发展建议</div>
                <div>Ø 考虑人的因素，赞赏他人对组织的贡献。</div>
                <div>Ø 学会鉴别和重视自己和他人的情感。</div>
              </View>
            </View>
          </View>
        </View>
      </View>
    </ScrollView>
  )
}

export default PTIndex
